<template>
  <div>节流</div>
  <div ref="box" class="scrollBar box h-[200px] w-[90%] ">
    <div v-for="item in 888" :key="item">{{ item }}</div>
  </div>
  <div>防抖</div>
  <input v-model="inputValue" type="text" placeholder="请输入..." @input="input">
  <div class="line"></div>
  <div>{{ inputValue }}</div>
</template>


<script setup lang="ts">
import {
  ref,
  onMounted,
} from 'vue'
import _ from 'lodash'

// 节流，通过throttle限制
let box = ref()
// const handleScroll = (event: any) => {
//   if (event.deltaY > 0) {
//     console.log('向下滚动');
//   } else {
//     console.log('向上滚动');
//   }
// }
const handleScroll = _.throttle(() => {
  console.log('滚动')
}, 2000)
onMounted(() => {
  box.value.addEventListener('wheel', handleScroll);
})

// 防抖，通过debounce限制
let inputValue = ref('')
// const input = (val) => {
//   console.log('输入了一次', val.data);

// }
const input = _.debounce(() => {
  console.log('输入了一次')
}, 2000)

</script>


<style lang="scss" scoped>
.box {
  margin: 0 auto;
}

.line {
  width: 100%;
  height: 1px;
  background-color: #333;
  margin: 10px 0;
}
</style>